import React, { useState, useEffect } from "react";
import Crumbs from "../../components/crumbs/index";
import "./scss/navicons.scss";
import { Nav_i } from "../../api/home.js";
import { Modal, Button, Upload, message } from "antd";
import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
}
function beforeUpload(file) {
  const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
  if (!isJpgOrPng) {
    message.error("您上传的非JPG/PNG 图片!");
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error("您的图片大于2M");
  }
  return isJpgOrPng && isLt2M;
}
const navIcon = (props) => {
  const [loading, setLoading] = useState(false);
  const [imageUrl, setImage] = useState("");
  const handleChange = (info) => {
    if (info.file.status === "uploading") {
      setLoading(true);
      return;
    }
    if (info.file.status === "done") {
      getBase64(
        info.file.originFileObj,
        (imageUrl) => setImage(imageUrl),
        setLoading(false)
      );
    }
  };
  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>上传图标</div>
    </div>
  );
  const [CrumbsList] = useState([
    {
      name: "导航图标",
      url: "/navIcon",
    },
  ]);
  const [nav_icon, setNav] = useState([]);
  useEffect(() => {
    Nav_i().then((res) => {
      setNav(res.data);
    });
  }, []);
  //对话框

  const [isModalVisible1, setIsModalVisible] = useState(false);
  // 点击对话框执行事件
  const showModal1 = () => {
    setIsModalVisible(true);
  };
  // 确定事件
  const handleOk1 = (data) => {
    Nav_i().then((res) => {
      setNav(res.data);
    });
    setIsModalVisible(false);
  };
  // 取消事件
  const handleCancel1 = () => {
    setIsModalVisible(false);
  };

  return (
    <div>
      <Crumbs CrumbsList={CrumbsList} />
      <table border="1" className="tab">
        <tbody>
          <tr>
            <th>图标</th>
            <th>标题</th>
            <th>位置</th>
            <th>操作</th>
          </tr>
          <tr>
            <td>
              {nav_icon?.map((item, index) => {
                if (item.name == "秒杀") {
                  return (
                    <img
                      className="iconImg"
                      key={index}
                      src={item.icon}
                      alt=""
                    />
                  );
                }
              })}
            </td>
            <td>秒杀</td>
            <td>首页</td>
            <td>
              <Button onClick={showModal1}>更换图标</Button>
              <Modal
                title="导航图标管理"
                visible={isModalVisible1}
                onOk={() => handleOk1(1)}
                onCancel={handleCancel1}
              >
                <div className="up">
                  <span>原图标</span>
                  <span>
                    {nav_icon?.map((item, index) => {
                      if (item.name == "秒杀") {
                        return (
                          <img
                            className="iconImg"
                            key={index}
                            src={item.icon}
                            alt=""
                          />
                        );
                      }
                    })}
                  </span>
                </div>
                <div>
                  <span>标题</span> <span>秒杀</span>
                </div>
                <div>
                  <span>点击上传图片</span>
                  <span>
                    <Upload
                      name="a"
                      listType="picture-card"
                      accept="image/*"
                      className="avatar-uploader"
                      showUploadList={false}
                      action="http://localhost:8888/c/change"
                      beforeUpload={beforeUpload}
                      onChange={handleChange}
                    >
                      {imageUrl ? (
                        <img
                          src={imageUrl}
                          alt="avatar"
                          style={{ width: "100%" }}
                        />
                      ) : (
                        uploadButton
                      )}
                    </Upload>
                  </span>
                </div>
              </Modal>
            </td>
          </tr>
          <tr>
            <td>
              {nav_icon?.map((item, index) => {
                if (item.name == "客服") {
                  return (
                    <img
                      className="iconImg"
                      key={index}
                      src={item.icon}
                      alt=""
                    />
                  );
                }
              })}
            </td>
            <td>客服</td>
            <td>商城</td>
            <td>
              {/* <Button onClick={showModal2}>更换图标</Button>
              <Modal
                title="导航图标管理"
                visible={isModalVisible2}
                onOk={handleOk2}
                onCancel={handleCancel}
              >
                <div>Some contents...</div>
                <div>Some contents...</div>
                <div>Some contents...</div>
              </Modal> */}
            </td>
          </tr>
          <tr>
            <td>
              {nav_icon?.map((item, index) => {
                if (item.name == "我的") {
                  return (
                    <img
                      className="iconImg"
                      key={index}
                      src={item.icon}
                      alt=""
                    />
                  );
                }
              })}
            </td>
            <td>我的</td>
            <td>导航栏</td>
            <td>
              {/* <Button onClick={showModal}>更换图标</Button>
              <Modal
                title="导航图标管理"
                visible={isModalVisible}
                onOk={handleOk}
                onCancel={handleCancel}
              >
                <div>Some contents...</div>
                <div>Some contents...</div>
                <div>Some contents...</div>
              </Modal> */}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
};

export default navIcon;
